<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <div id="box" style="width:600px;height:600px;margin:0 auto;border:2px solid #000;background:#000;"></div>
  <script type="text/javascript">
    var canvasList = document.getElementById('box');
    var canvas = document.createElement('canvas');
    canvasList.appendChild(canvas);
    canvas.width = 600; //
    canvas.height = 600;
    var context = canvas.getContext("2d");
    var width = 600, height = 600;
    var arr = [];
    for (var i = 0; i < 10; i++) {
      arr.push({ x: parseInt(Math.random() * canvas.width), y: parseInt(Math.random() * canvas.height) });
    };
    var radius = 10;
    //创建构造函数Circle
    function Circle(x, y, radius) {
      this.xx = x;//在画布内随机生成x值
      this.yy = y;
      this.radius = radius;
    };
    Circle.prototype.radiu = function () {
      radius += 0.5; //每一帧半径增加0.5
      if (this.radius >= 20) {
        radius = 10;
      };
    };
    // 绘制圆形的方法
    Circle.prototype.paint = function () {
      context.beginPath();
      context.arc(this.xx, this.yy, 10, 0, Math.PI * 2);
      context.fillStyle = "rgba(250,250,50,1)";//填充颜色,默认是黑色
      context.fill();//画实心圆
      context.closePath();
      context.lineWidth = 2; //线条宽度
      context.strokeStyle = 'rgba(250,250,50,1)'; //颜色
      context.stroke();
      this.paintkong();
      this.paintkong(0);
      this.paintkong(10);
      this.paintkong(20);
    };
    Circle.prototype.paintkong = function (num) {
      context.beginPath();
      context.arc(this.xx, this.yy, this.radius + num, 0, Math.PI * 2);
      context.closePath();
      context.lineWidth = 1; //线条宽度
      context.strokeStyle = 'rgba(250,250,50,1)'; //颜色
      context.stroke();
    };
    //  创建
    var newfun = null;
    function createCircles() {
      for (var j = 0; j < arr.length; j++) {
        newfun = new Circle(arr[j].x, arr[j].y, radius);//调用构造函数
        newfun.paint();
      };
      newfun.radiu();
    };
    createCircles()
    // 创建临时canvas 
    var backCanvas = document.createElement('canvas'),
      backCtx = backCanvas.getContext('2d');
    backCanvas.width = width;
    backCanvas.height = height;
    //设置主canvas的绘制透明度
    context.globalAlpha = 0.7;
    //显示即将绘制的图像，忽略临时canvas中已存在的图像
    backCtx.globalCompositeOperation = 'copy';
    var render = function () {
      //先将主canvas的图像缓存到临时canvas中
      backCtx.drawImage(canvas, 0, 0, width, height);
      //清除主canvas上的图像
      context.clearRect(0, 0, width, height);
      //在主canvas上画新圆
      createCircles();
      //新圆画完后，再把临时canvas的图像绘制回主canvas中
      context.drawImage(backCanvas, 0, 0, width, height);
    };
    setInterval("render()", 100);
  </script>
</body>

</html>